<template>
    <div class="top">
        <img src="../../assets/img/头部.png" alt="">
    </div>
    <div class="my-top-wrapper">
        <div class="my-top-background"></div>
        <div class="my-top-content">
            <div class="my-change">
                <img src="@/assets/img/用户修改.png" alt="">
            </div>
            <div class="my-touxiang">
                <img class="my-tx" src="@/assets/img/头像.png" alt="">
                <div class="my-touxiang-item">
                    <div class="my-item-content">
                        <span>热心市民李先生</span>
                        <img src="@/assets/img/level.png" alt="">
                    </div>
                    <div class="my-item-id">
                        <span>ID: 1069643013</span>
                    </div>
                    <div class="my-item-fgx"></div>
                    <div class="my-info-wrapper">
                        <div class="my-info-content" v-for="item in list" :key="id">
                            <span>{{ item.top }}</span>
                            <span>{{ item.bottom }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="my-bottom-wrapper">
        <div class="my-bottom-content" v-for="a in l" :key="id">
            <div class="my1" v-if="a.id == 2">
                <router-link class="my2" :to="'/adrmanage'">
                    <div class="my-bottom-content-left">
                        <img :src="a.src" />
                        <span>{{ a.writing }}</span>
                    </div>
                    <div class="my-bottom-content-right">
                        <img src="@/assets/img/右箭头.png" alt="">
                    </div>
                </router-link>
            </div>
            <div class="my2" v-else>
                <div class="my-bottom-content-left">
                    <img :src="a.src" />
                    <span>{{ a.writing }}</span>
                </div>
                <div class="my-bottom-content-right">
                    <img src="@/assets/img/右箭头.png" alt="">
                </div>
            </div>

        </div>
    </div>

    <div class="index-bottom">
        <div class="index-bottom-wrapper">
            <router-link :to="'/index'">
                <div class="index-bottom-cotent1">
                    <img src="@/assets/img/首页.png" alt="">
                    <span>首页</span>
                </div>
            </router-link>
            <router-link :to="'/buy'">
                <div class="index-bottom-cotent1">
                    <img src="@/assets/img/buy.png" alt="">
                    <span>购物车</span>
                </div>
            </router-link>
            <router-link :to="'/dingdan'">
                <div class="index-bottom-cotent1">
                    <img src="@/assets/img/订单.png" alt="">
                    <span>订单</span>
                </div>
            </router-link>
            <router-link :to="'/my'">
                <div class="index-bottom-cotent">
                    <img src="@/assets/img/我的1.png" alt="">
                    <span>我的</span>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import { navData } from "@/untils/nav"
import "@/assets/css/index.css";
import "@/assets/css/my.css";
import top from "@/assets/img/money.png";
import mid from "@/assets/img/address.png";
import bom from "@/assets/img/talk.png";
export default {
    setup() {
        const l = [
            {
                id: 1,
                writing: "我的钱包",
                src: top
            },
            {
                id: 2,
                writing: "我的地址",
                src: mid
            },
            {
                id: 3,
                writing: "客服与帮助",
                src: bom
            },
        ];
        const list = [
            {
                id: 1,
                top: "红包",
                bottom: 218
            },
            {
                id: 2,
                top: "优惠券",
                bottom: "12张"
            },
            {
                id: 3,
                top: "鲜豆",
                bottom: 88
            },
            {
                id: 4,
                top: "白条",
                bottom: 1000
            },
        ];
        return {
            navData,
            list,
            l
        }
    }
};
</script>